<div navbar ng-init="currentItem='utils.ecs'"></div>
<div ng-show="!loaded">
    <div loading></div>
</div>

<div id="main" ng-show="loaded" style="display:none">
    <div class="module-header">
        <h3>帐号管理</h3>
    </div>

    <div class="widget widget-table" ng-init="load()">
        <div class="widget-header">
            <i class="icon-list-alt"></i>
            <h3>帐号列表</h3>
            <div class="pull-right" style="margin-right:10px">
                <button class="btn btn-small" ng-click="addconfirm()"><i class="icon-plus"></i> 添加新帐号</button>
            </div>
        </div>
        <div class="widget-content">
            <table class="table table-striped table-hover table-bordered table-condensed">
                <thead>
                    <tr>
                        <th style="width:20px" class="td-right">#</th>
                        <th>帐号备注</th>
                        <th>Access Key ID</th>
                        <th>Access Key Secret</th>
                        <th>云服务器管理</th>
                        <th style="width:130px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-show="accounts.length==0">
                        <td colspan="6">尚未添加帐号。</td>
                    </tr>
                    <tr ng-repeat="account in accounts">
                        <td class="td-right">{{$index+1}}</td>
                        <td>{{account.name}}</td>
                        <td>{{account.access_key_id}}</td>
                        <td>
                            <span ng-bind-html-unsafe="account.access_key_secret|account.secret" ng-show="!account.showsecret"></span>
                            <a ng-click="account.showsecret=true" ng-show="!account.showsecret">显示</a>
                            <span ng-show="account.showsecret">{{account.access_key_secret}}</span>
                            <a ng-click="account.showsecret=false" ng-show="account.showsecret">隐藏</a>
                        </td>
                        <td ng-bind-html-unsafe="account.status | account.status"></td>
                        <td>
                            <button class="btn btn-small" ng-click="editconfirm(account)">
                                <i class="icon-edit"></i> 修改
                            </button>
                            <button class="btn btn-small" ng-click="removeconfirm(account)">
                                <i class="icon-remove"></i> 删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="addconfirm" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">添加新帐号</h3>
    </div>
    <div class="modal-body">
        <div class="alert alert-info">
            帐号请在阿里云用户中心中获取（“我的帐户”-“安全认证”）
        </div>
        <div class="form-horizontal" onsubmit="return false">
            <div class="control-group">
                <label class="control-label">帐号备注：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="newaccount.name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Access Key ID：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="newaccount.access_key_id">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Access Key Secret：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="newaccount.access_key_secret">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" ng-model="newaccount.status"> 启用对该帐号下云服务器的管理
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" onclick="$('#addconfirm').modal('hide')" ng-click="add()">添加帐号</button>
    </div>
</div>

<div id="editconfirm" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">更新帐号设置</h3>
    </div>
    <div class="modal-body">
        <div class="form-horizontal" onsubmit="return false">
            <div class="control-group">
                <label class="control-label">帐号备注：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="curaccount.name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Access Key ID：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="curaccount.access_key_id">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Access Key Secret：</label>
                <div class="controls">
                    <input type="text" class="input" ng-model="curaccount.access_key_secret">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" ng-model="curaccount.status"> 启用对该帐号下云服务器的管理
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" onclick="$('#editconfirm').modal('hide')" ng-click="update()">保存设置</button>
    </div>
</div>

<div id="removeconfirm" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">删除确认</h3>
    </div>
    <div class="modal-body">
        <p>是否确认删除 “{{curaccount.name}}” 这个帐号？</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" onclick="$('#removeconfirm').modal('hide')" ng-click="remove()">确认删除</button>
    </div>
</div>